<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="./vue.js"></script>
    <style>
        #root {
            width: 500px;
            margin: 200px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root">
        <ul>
            <li v-for='(gua,index) in guas' :key='index'>{{gua.name}}---{{gua.price}}----{{index}}<input type="text">
            </li>
        </ul>
        <button @click='add'>click me to add the list</button>
        <!-- vm在页面发生改动后会重新生成虚拟dom，与初始虚拟dom对比，若发生改变才会替换，
        对比的依据是key值，
        使用index作为key值会导致当for的列表改变时（尤其是改变顺序），导致错误的对比，
        在节点含有输入框时尤其要命，因为输入框内容不参与对比 -->
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: {
                guas: [{
                    name: '金瓜粒子',
                    price: '两块钱一斤',
                    id: '001'
                }, {
                    name: '金瓜皮',
                    price: '10块钱一斤',
                    id: '002'
                }]
            },
            methods: {
                add() {
                    const gua = {
                        name: '吸铁石',
                        price: '0.2/kg',
                        id: '003'
                    }
                    this.guas.unshift(gua)
                }
            },
        })
    </script>
</body>

</html>